<template>
    <div>
        <div class="ef-node-form">
            <div class="ef-node-form-header">
                编辑
            </div>
            <div class="ef-node-form-body">
                <el-form :model="node" ref="dataForm" label-width="80px" v-show="type === 'node'" :rules="rules">
                    <el-form-item label="节点id" prop="id">
                        <el-input v-model="node.id" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="类型"  prop="type">
                        <el-input v-model="node.type" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="名称"  prop="name">
                        <el-input v-model="node.name" :disabled="!currentnodeid"></el-input>
                    </el-form-item>
                    <el-form-item label="left坐标"  prop="left">
                        <el-input v-model="node.left" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="top坐标"  prop="top">
                        <el-input v-model="node.top" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="ico图标"  prop="ico">
                        <el-input v-model="node.ico" :disabled="!currentnodeid"></el-input>
                    </el-form-item>
                    <template v-if="node.type=='处置节点'">
                        <el-form-item label="业务类型"  prop="businesstype">
                            <el-select v-model="node.businesstype" placeholder="请选择业务类型" :disabled="!currentnodeid" @change="changeBusinesstype" style="width:100%">
                                <el-option label="机构" value="org"></el-option>
                                <el-option label="人员" value="per"></el-option>
                                <el-option label="角色" value="role"></el-option>
                                <el-option label="自定义" value="custom"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机构"  prop="orginfo" v-if="node.businesstype=='org'">
                            <SuperSearch v-model="node.orginfo" :config="chooseOrgConfig" :disabled="!currentnodeid"/>
                        </el-form-item>
                        <el-form-item label="人员" prop="perinfo" v-if="node.businesstype=='per'">
                            <SuperSearch v-model="node.perinfo" :config="choosePerConfig" :disabled="!currentnodeid"/>
                        </el-form-item>
                        <el-form-item label="角色" prop="roleid" v-if="node.businesstype=='role'">
                            <el-select v-model="node.roleid" placeholder="请选择角色" :disabled="!currentnodeid" @change="changeRole">
                                <el-option :label="item.title"  v-for="item in roleListOptions" :key="item.value" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接口" prop="custom" v-if="node.businesstype=='custom'">
                            <el-input v-model="node.custom" :disabled="!currentnodeid"></el-input>
                        </el-form-item>
                        <el-form-item label="发送短信" prop="needsendmsg">
                            <el-select v-model="node.needsendmsg" placeholder="请选择是否发送短信" :disabled="!currentnodeid" style="width:100%">
                                <el-option label="是"  value="1"></el-option>
                                <el-option label="否"  value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <el-form-item>
                        <el-button  @click="refresh" :disabled="!currentnodeid">
                            <Refresh style="width: 1em; height: 1em;"/>
                            重置</el-button>
                        <el-button type="primary" @click="save" :disabled="!currentnodeid">
                            <Check style="width: 1em; height: 1em;"/>保存</el-button>
                    </el-form-item>
                </el-form>
                <el-form :model="line" ref="dataForm2" label-width="80px" v-show="type === 'line'">
                    <el-form-item label="条件类型" prop="conditiontype">
                        <el-select v-model="line.conditiontype" placeholder="请选择条件类型" style="width:100%">
                            <el-option label="反射"  value="反射"></el-option>
                            <el-option label="接口"  value="接口"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="条件名称">
                        <el-input v-model="line.label"></el-input>
                    </el-form-item>
                    <el-form-item label="条件值">
                        <el-input v-model="line.conditionvalue"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button  @click="refresh">
                            <Refresh style="width: 1em; height: 1em;"/>
                            重置</el-button>
                        <el-button type="primary" @click="saveLine">
                            <Check style="width: 1em; height: 1em;"/>保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!--            <div class="el-node-form-tag"></div>-->
        </div>
    </div>

</template>

<script>
    import SuperSearch from '../../SuperSearch/index.vue'
    import { cloneDeep } from 'lodash'
    import {getRoleList,getPerListFunction,getOrgListFunction,districtList} from '../config.js'

    export default {
        components: {
            SuperSearch
        },
        data() {
            return {
                chooseOrgConfig:{
                    multipleSelect:false,//[默认false,即单选框]多选还是单选,
                    returnShowColomn:'name',//[*]组件回显的字段,显示在input框里的数据
                    tooltip:['fathername','name'],//[]气泡回显的字段,可以配置一个也可以配置多个字段,如果配置多个,回显时使用##连接
                    searchConfig:{//搜索区域配置
                        labelWidth: '100px',
                        itemStyle: {
                            padding: '10px'
                        },
                        colLayout: {
                            span: 7
                        },
                        searchProps: [
                            {
                                field: 'district',
                                type: 'select',
                                label: '所属区县',
                                placeholder: '请选择区县',
                                options:districtList,
                                otherOptions: {
                                    filterable:true,
                                },
                            },
                            {
                                field: 'name',
                                type: 'input',
                                label: '单位名称',
                                placeholder: '请输入单位名称',
                            },
                        ]
                    },
                    detailPropList:[//[*]表格的列信息
                        { prop: 'name', label: '组织机构', minWidth: '150' },
                        { prop: 'fathername', label: '上级组织名称', minWidth: '150'},
                        { prop: 'type', label: '类型', minWidth: '80',codeMap:[//表格里如果有code,转化
                            { title: '化工企业', value: '1' },
                            { title: '承包商', value: '2' },
                            { title: '政府', value: '3' },
                            { title: '企业部门', value: '11' },
                            { title: '政府部门', value: '31' },
                            { title: '市区', value: '市区' },
                            { title: '区县', value: '区县' },
                            { title: '园区', value: '园区' },
                        ]},
                        { prop: 'districtname', label: '所属区县', minWidth: '100'},
                    ],
                    selectedPropList:[//[只有多选功能时生效]已选中区域的表格的信息
                        { prop: 'name', label: '组织机构', minWidth: '120' },
                        { prop: 'fathername', label: '上级组织名称', minWidth: '120'},
                    ],
                    getTableDataFunction:getOrgListFunction
                },
                choosePerConfig:{
                    multipleSelect:false,//[默认false,即单选框]多选还是单选,
                    returnShowColomn:'name',//[*]组件回显的字段,显示在input框里的数据
                    tooltip:['name'],//[]气泡回显的字段,可以配置一个也可以配置多个字段,如果配置多个,回显时使用##连接
                    searchConfig:{//搜索区域配置
                        labelWidth: '100px',
                        itemStyle: {
                            padding: '10px'
                        },
                        colLayout: {
                            span: 7
                        },
                        searchProps: [
                            {
                                field: 'orgname',
                                type: 'input',
                                label: '组织机构名称',
                                placeholder: '',
                            },
                            {
                                field: 'name',
                                type: 'input',
                                label: '人员名称',
                                placeholder: '请输入人员名称',
                            },
                        ]
                    },
                    detailPropList:[//[*]表格的列信息
                        { prop: 'name', label: '姓名', minWidth: '150'},
                        { prop: 'phone', label: '电话', minWidth: '100'},
                        { prop: 'orgname', label: '组织机构', minWidth: '100'},
                    ],
                    selectedPropList:[//[只有多选功能时生效]已选中区域的表格的信息
                        { prop: 'name', label: '姓名', minWidth: '120' },
                        { prop: 'phone', label: '电话', minWidth: '120'},
                    ],
                    getTableDataFunction:getPerListFunction
                },
                visible: true,
                // node 或 line
                type: 'node',
                node: {},
                line: {},
                data: {},
                currentnodeid: '',
                roleListOptions:[],
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    businesstype: [
                        { required: true, message: '请选择节点类型', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            getRoleList().then(res => {
                this.roleListOptions = res||[]
            })
        },
        watch: {
            // 如果需要第一次就执行监听 则需要设置：immediate: true
            // 'node.orginfo': {
            //     handler(newVal,oldVal) {
            //         debugger
            //         if(Array.isArray(newVal) && newVal.length ==1){
            //             let orgid = newVal[0].id
            //             let orgname = newVal[0].name
            //             if(orgid && orgname){
            //                 this.choosePerConfig.searchConfig.searchProps.forEach(item => {
            //                     if(item.field === 'orgid'){
            //                         item.defaultValue = orgid
            //                     }
            //                     if(item.field === 'orgname'){
            //                         item.defaultValue = orgname
            //                     }
            //                 })
            //             }
            //         }
                    
            //     },
            //     deep: true,
            // }, 
        },
        methods: {
            changeBusinesstype(e){

            },
            changeRole(e){
                let target = this.roleListOptions.find(item=>item.value ==e)
                if(target){
                    this.node.rolename = target.title
                }
            },
            /**
             * 表单修改，这里可以根据传入的ID进行业务信息获取
             * @param data
             * @param id
             */
            nodeInit(data, id) {
                this.type = 'node'
                this.data = data
                this.currentnodeid = id
                setTimeout(() => {
                    if(this.node.type==='处置节点'){
                        this.rules={
                            name: [
                                { required: true, message: '请输入名称', trigger: 'blur' }
                            ],
                            businesstype: [
                                { required: true, message: '请选择节点类型', trigger: 'blur' }
                            ]
                        }
                    }else{
                        this.rules={
                            name: [
                                { required: true, message: '请输入名称', trigger: 'blur' }
                            ]
                        }
                    }
                }, 0)
                
                data.nodeList.filter((node) => {
                    if (node.id === id) {
                        this.node = cloneDeep(node)
                    }
                })
            },
            refresh(){
                debugger
                if(this.type == 'node'){
                    this.data.nodeList.filter((node) => {
                        if (node.id === this.currentnodeid) {
                            this.node = cloneDeep(node)
                        }
                    })
                }else if(this.type == 'line'){
                    this.data?.lineList.filter((line) => {
                        if (line.from ==this.line.from && line.to == this.line.to) {
                            this.line = cloneDeep(line)
                        }
                    })
                }
            },
            lineInit(line,data) {
                debugger
                this.type = 'line'
                this.line = cloneDeep(line)
                this.data = data
            },
            // 修改连线
            saveLine() {
                debugger
                this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label,this.line.conditiontype,this.line.conditionvalue)
            },
            save() {
                debugger
                this.$refs.dataForm.validate(async(validate) => {
                    if(validate){
                        this.data.nodeList.filter((node) => {
                            if (node.id === this.node.id) {
                                node.name = this.node.name
                                node.left = this.node.left
                                node.top = this.node.top
                                node.ico = this.node.ico
                                node.state = this.node.state
                                node.businesstype = this.node.businesstype
                                node.orginfo = this.node.orginfo
                                node.perinfo = this.node.perinfo
                                node.roleid = this.node.roleid
                                node.custom = this.node.custom
                                node.rolename = this.node.rolename
                                node.needsendmsg = this.node.needsendmsg
                                this.$emit('repaintEverything')
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style>
    .el-node-form-tag {
        position: absolute;
        top: 50%;
        margin-left: -15px;
        height: 40px;
        width: 15px;
        background-color: #fbfbfb;
        border: 1px solid rgb(220, 227, 232);
        border-right: none;
        z-index: 0;
    }
</style>
